<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="father">
    <h1>标签1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

    <script>
      //DOM:文档对象模型
      //浏览器就是一个DOM树形结构
      //更新：更新一个DOM
      //遍历DOM节点：得到DOM节点
      //删除：删除一个DOM节点
      //添加：添加一个新节点
      //要操作一个DOM节点，就必须获得这个DOM节点
      var h1 = document.getElementsByTagName("h1");
      var p1 = document.getElementById("p1");
      var p2 = document.getElementsByClassName("p2");
      //获取所有子节点
      var father = document.getElementById('father');
      father.firstChild
      father.lastChild


    </script>
</body>
</html>